<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="25%">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item label="请选择员工" prop="employee">
        <el-select
          v-model="formData.employee"
          placeholder="请选择"
          remote
          :remote-method="searchEmployee"
          reserve-keyword
          filterable
          :value-key="employeeCode"
        >
          <el-option
            v-for="employee in employeeList"
            :key="employee.employeeCode"
            :label="employee.employeeNickname"
            :value="employee"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="评分类型" prop="performanceType">
        <el-select v-model="formData.performanceType" placeholder="请选择评分类型">
          <el-option
            v-for="dict in getStrDictOptions(DICT_TYPE.MEIJIA_PERFORMANCE_TYPE).filter((item) => {
              return item.value != 'init'
            })"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="评分" prop="score">
        <el-input v-model="formData.score" placeholder="请输入评分" />
      </el-form-item>

      <el-form-item label="原因" prop="reason">
        <el-input v-model="formData.reason" placeholder="请输入" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import * as ScoreManageApi from '@/api/meijia/score/manage'
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
import { da } from 'element-plus/es/locale'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const roleType = ref('manage')
const formData = ref({
  id: undefined,
  code: undefined,
  agentCode: undefined,
  businessType: undefined,
  systemEmployeeCode: undefined,
  employeeCode: undefined,
  employeeNickname: undefined,
  systemEmployeeRole: undefined,
  performanceType: undefined,
  score: undefined,
  reason: undefined,
  employee: undefined
})
const formRules = reactive({
  businessType: [{ required: true, message: '业务类型不能为空', trigger: 'change' }],
  employee: [{ required: true, message: '员工编号不能为空', trigger: 'blur' }],
  performanceType: [{ required: true, message: '评分类型不能为空', trigger: 'change' }],
  score: [{ required: true, message: '评分不能为空', trigger: 'blur' }],
  reason: [{ required: true, message: '图片地址不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await ScoreManageApi.getScoreManage(id)
      await searchEmployee(formData.value.employeeNickname!)
      const employee = {
        agentCode: formData.value.agentCode,
        systemEmployeeCode: formData.value.systemEmployeeCode,
        employeeCode: formData.value.employeeCode,
        businessType: formData.value.businessType
      }
      formData.value.employee = employee
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as ScoreManageApi.ScoreManageVO
    data.agentCode = data.employee.agentCode
    data.systemEmployeeCode = data.employee.systemEmployeeCode
    data.employeeCode = data.employee.employeeCode
    data.businessType = data.employee.businessType
    if (formType.value === 'create') {
      await ScoreManageApi.createScoreManage(data)
      message.success(t('common.createSuccess'))
    } else {
      await ScoreManageApi.updateScoreManage(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    code: undefined,
    agentCode: undefined,
    businessType: undefined,
    systemEmployeeCode: undefined,
    employeeCode: undefined,
    employeeNickname: undefined,
    systemEmployeeRole: undefined,
    performanceType: undefined,
    score: undefined,
    reason: undefined,
    employee: undefined
  }
  formRef.value?.resetFields()
}
const employeeList = ref()
const searchEmployee = async (employeeName: String) => {
  if (employeeName && employeeName != '') {
    employeeList.value = await ScoreManageApi.getEmployeeList(employeeName)
  }
}
</script>
<style scoped>
.el-select {
  width: 100%;
}
</style>
>
